<template>
    <div class="work-detail">
        <van-nav-bar title="工单详情" left-text="返回" left-arrow @click-left="onClickLeft" :safe-area-inset-top="true" />

        <div class="work-detail-steps">
            <van-steps :active="active">
                <van-step>创建工单</van-step>
                <van-step>等待分配</van-step>
                <van-step>处理中</van-step>
                <van-step>对策审批中</van-step>
                <van-step>客户确认中</van-step>
                <van-step>关闭</van-step>
            </van-steps>
        </div>

        <!-- 底部列表 -->
        <div class="work-detail-content">
            <detailSubassembly @edit="edit" button-type="1" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

import detailSubassembly from './detailSubassembly.vue'

const router = useRouter()

//返回上一级
const onClickLeft = () => {
    router.go(-1)
};

const active = ref()

const edit = (type: number) => {
    active.value = type
}

</script>

<style lang="scss" scoped>
.work-detail {
    width: 100%;
    height: 100%;
    z-index: 999;

    .work-detail-steps {
        width: 380px;

        :deep(.van-steps) {
            .van-steps__items {

                .van-step--horizontal:first-child .van-step__title {
                    margin: 0;
                }

                .van-step--horizontal .van-step__title {
                    width: 48px;
                    margin-left: 12px;
                }

                .van-step--horizontal .van-step__title {
                    margin-left: 12px;
                }

                .van-step--horizontal:last-child:not(:first-child) .van-step__title {
                    margin-left: 12px !important;
                }

                .van-step--horizontal:last-child:not(:first-child) .van-step__circle-container {
                    // left: 10px;
                    right: 27px;
                }

                .van-step--horizontal:last-child:not(:first-child) {
                    right: -23px;
                }

                .van-step--finish .van-step__circle,
                .van-step--finish .van-step__line {
                    background-color: #000;
                }

                .van-step__icon--active,
                .van-step__title--active,
                .van-step__icon--finish,
                .van-step__title--finish {
                    color: #bf1920;
                }

                .van-step--horizontal .van-step__circle-container {
                    top: 10vw;
                }

                .van-step--horizontal .van-step__line {
                    top: 10vw;
                }
            }
        }

    }

    .work-detail-content {
        width: 100%;
        height: calc(100vh - 123px);
        overflow-y: auto;
    }

    :deep(.van-nav-bar .van-icon) {
        color: #000;
    }

    :deep(.van-nav-bar__text) {
        color: #000;
    }


}
</style>